<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'

const themeColor = {
    bar: '#3b6ad9',
    remain: '#a6cde3',
    text: '#1f78b4'
};
const progress = 43;

// DOM 引用
const chartDom = ref(null)

onMounted(() => {
    initChart()
})

// 初始化图表
const initChart = () => {
    const myChart = echarts.init(chartDom.value)

    const option = {
        title: [{
            text: progress,
            x: 'center',
            y: 'center',
            textStyle: {
                fontFamily: 'Lato',
                foontWeight: '600',
                color: '#01f8ff',
                fontSize: 25,

            },
        }],
        polar: {
            radius: ['90%', '55%'],
            center: ['50%', '50%'],
        },
        angleAxis: {
            max: 100,
            show: false,
        },
        radiusAxis: {
            type: 'category',
            show: true,
            axisLabel: {
                show: false,
            },
            axisLine: {
                show: false,

            },
            axisTick: {
                show: false
            },
        },
        series: [{
            name: '',
            type: 'bar',
            roundCap: true,
            barWidth: 160,
            showBackground: true,
            backgroundStyle: {
                color: '#002865',
            },
            data: [progress],
            coordinateSystem: 'polar',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 0,
                        color: '#1c836a'
                    }, {
                        offset: 1,
                        color: '#d6d53e' 
                    }]),
                }
            }

        },]
    };

    myChart.setOption(option)
}

</script>

<template>
    <div ref="chartDom" class="chart-container"></div>
</template>

<style scoped lang="less">
.chart-container {
    width: 100%;
    height: 100%;
}
</style>
